<template>
  <page-frame>
    <div class="processConfig">
      <div class="panel" v-for="(item,index) in processList">
        <div class="panel-title first">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">{{item.processName}}</div>
              <el-button class="lightGreenBtn audit" size="small" @click="addAudit(item,index)">添加审核</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="panel-content" style="margin-left: 28px;">
          <img :src='item.processUrl' alt="">
        </div>
        <div>
          <span style="margin-right:5px;">审批类型:</span>
          <span style="margin-right:15px;">{{item.processTypeName}}</span>
          <span v-if="item.processTypeId==1">
             <span style="margin-right:5px;margin-right: 10px;;" v-for="(nameItem,index) in item.approvalDTOs">
               {{index+1 | toChineseNumber}}级审批人:{{nameItem.name}}
             </span>
          </span>
          <span v-if="item.processTypeId==2">
            <span style="margin-right:5px;">审批人:</span>
            <span style="margin-right:5px;" v-for="nameItem in item.approvalDTOs">{{nameItem.name}}</span>
          </span>
        </div>
      </div>

      <!--添加审批人弹框-->
      <el-dialog title="添加审批" :visible.sync="auditProcess" size="tiny" :close-on-click-modal="false">
        <el-form :model="auditProcessForm" label-width="100px" class="demo-dynamic">
          <el-form-item
            v-for="(approver, index) in auditProcessForm.approvers"
            :label="'审批人'"
            :prop="'approvers.' + index + '.memberName'"
          >
            <el-col :span="16">
              <el-autocomplete v-model="approver.name" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
            </el-col>
            <el-col :span="2" :offset="1" v-show="auditProcessForm.approvers.length!=0&&index==auditProcessForm.approvers.length-1">
              <el-button type="text" @click="addApprover(index)">新增</el-button>
            </el-col>
            <el-col :span="2" :offset="1" v-show="auditProcessForm.approvers.length-1!=0">
              <el-button type="text" @click.prevent="removeApprover(approver)">删除</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="审批类型" prop="approveType">
            <el-col :span="22">
              <el-select v-model="auditProcessForm.approveType" @change="selectType" placeholder="请选择审批类型">
                <el-option
                  v-for="item in approveTypeOptions"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="auditProcess = false">取 消</el-button>
          <el-button class="lightGreenBtn" @click="submit">确 定</el-button>
        </div>
      </el-dialog>

      <!--提示弹框-->
      <el-dialog title="提示" :visible.sync="tipInfo" size="tiny" :close-on-click-modal="false">
        <div style="text-align: center;font-size:20px;">
          <span><i class="el-icon-circle-check" style="color:#13CE66;font-size:27px;margin-right:15px;"></i>已保存您当前的审批流程:</span>
        </div>
        <div style="text-align: center;font-size:17px;margin-top:15px;">
          审批类型:
            <span v-for="item in approveTypeOptions">
               {{item.value==auditProcessForm.approveType ? item.name : ''}}
            </span>
        </div>
        <div style="margin-top: 15px;margin-bottom: 15px;text-align: center;font-size:17px;">
           <span v-if="auditProcessForm.approveType==1">
             <div style="margin-right:5px;margin-right: 10px;;" v-for="(nameItem,index) in auditProcessForm.approvers">
               {{index+1 | toChineseNumber}}级审批人:{{nameItem.name}}
             </div>
          </span>
          <span v-if="auditProcessForm.approveType==2">
            <span style="margin-right:5px;">审批人:</span>
            <span style="margin-right:5px;" v-for="nameItem in auditProcessForm.approvers">{{nameItem.name}}</span>
          </span>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="tipInfo = false" class="lightGreenBtn">知道了</el-button>
        </div>
      </el-dialog>

    </div>
  </page-frame>
</template>


<script>
  import processConfigurationApi from '../../service/member/processConfigurationApi';
  import commonApi from '../../service/member/commonApi'
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  export default {
    data() {
      return {
        index:null,
        approvalIndex:0,
        processKey:null,
        processList:[],
        auditProcess:false,
        tipInfo: false,
        auditProcessForm:{
          approvers:[{

          }],
          approveType:1,
        },
        members:[
          {
            memberId:1,
            name: "董静jing",
            value: "董静jing",
          },
          {
            memberId:2,
            name: "董静",
            value: "董静",
          }
        ],
        submitData:{
          "approvalDTOs": [
//            {
//              "id": 0,
//              "name": "",
//              "typeName": "",
//              "typeValue": 0
//            }
          ],
          "processKey": "",
        },
        approveTypeOptions:[{
          "value": 0,
          "name": "并行审批"
        },{
          "value": 1,
          "name": "换床结算审核"
        }],
        memberView:{
          memberName:'',
        },
        objItem:{
          id:null,
          name:'',
          typeName:'',
          typeValue:''
        }
      }
    },
    methods: {
      init(){
        this.getApprovalWay();
        this.loadProcessDefinitions();
        this.getAllEmps();
      },
      /**
       * 审批类型改变时
       */
      selectType(item){
        for(let i =0;i<this.approveTypeOptions.length;i++){
          if(this.approveTypeOptions[i].value==item){
            this.processList[this.index].processTypeName = this.approveTypeOptions[i].name;
            this.processList[this.index].processTypeId = item;
          }
        }
      },
      /**
       * 获取当前流程定义
       */
      loadProcessDefinitions(){
        let self = this;
        processConfigurationApi.getProcessDefinitions().then(
          (response)=>{
            self.processList = response.data.data;
            if(self.processList.length==0){//没有流程配置项

            }else{//有流程配置项
              for(let k=0;k<self.processList.length;k++){
                if(self.processList[k].approvalDTOs.length==0){//没有返回类型及审核人
                  self.processList[k].processTypeName = '';
                  self.processList[k].processTypeId = null;
                  self.processList[k].approvalDTOs=[{
                    processTypeName:'',
                    id:'',
                    name:''
                  }];
                }else{
                  for(let i=0;i<self.processList[k].approvalDTOs.length;i++){
                    self.processList[k].processTypeName = self.processList[k].approvalDTOs[0].typeName;
                    self.processList[k].processTypeId = self.processList[k].approvalDTOs[0].typeValue;
                  }
                }
              }
            }
          }
        );
      },
      /**
       * 获取审批方式
       */
      getApprovalWay(){
        let self = this;
        processConfigurationApi.getApprovalWay().then(
          (response)=>{
            self.approveTypeOptions = response.data.data;
          }
        );
      },

      /**
       * 添加审核
       */
      addAudit(item,index){
        this.auditProcess = true;
        this.index = index;
        if(item.approvalDTOs.length==0){
          //清空弹框中数据
          this.auditProcessForm.approvers = [{
            id:null,
            name:'',
          }];
        }else{
          this.auditProcessForm.approvers=item.approvalDTOs;
          this.auditProcessForm.approveType = item.processTypeId;
        }
        this.submitData.processKey = item.processKey;
      },
      /**
       * 删除审批人
       */
      removeApprover(item) {
        var index = this.auditProcessForm.approvers.indexOf(item)
        if (index != -1) {
          this.auditProcessForm.approvers.splice(index, 1);
        }
      },
      /**
       * 新增审批人
       */
      addApprover(index) {
        this.approvalIndex = index+1;
        this.auditProcessForm.approvers.push({
          id:'',
          name: '',
        });
      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        console.debug(cb);
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.auditProcessForm.approvers[this.approvalIndex].id = item.memberId;
        if(this.approvalIndex==0){//当数组为空
          this.processList[this.index].processTypeName = '';
          this.processList[this.index].approvalDTOs[0].id = this.auditProcessForm.approvers[this.approvalIndex].id;
          this.processList[this.index].approvalDTOs[0].name = this.auditProcessForm.approvers[this.approvalIndex].name;
        }
      },
      /**
       * 获取所有员工
       */
      /*getAllEmps(){
        let self = this;
        outRegistrationApi.getAllMemberInfor(self.memberView).then(
          (response)=> {
            self.members = response.body.data;
            for(var i=0;i<self.members.length;i++){
              var  member = self.members[i];
              member.value = member.memberName;
            };
          }
        )
      },*/
      /**
       * 获取所有员工
       */
     getAllEmps(){
        let self = this;
        outRegistrationApi.getAllEmInfor('auth').then(
          (response)=> {
          self.members = response.body.data;
        for(var i=0;i<self.members.length;i++){
          var  member = self.members[i];
          member.value = member.memberName;
        };
      }
      )
      },
      /**
       * 提交
       */
      submit(){
        let self = this;
        self.submitData.approvalDTOs = [];
        //提交之前将typeValue和typeName放到数组里
        for(let i=0;i<self.auditProcessForm.approvers.length;i++){
          self.auditProcessForm.approvers[i].typeValue = self.auditProcessForm.approveType;
          self.submitData.approvalDTOs.push(self.auditProcessForm.approvers[i]);
        }
        processConfigurationApi.submitProcessDefinitions(self.submitData).then(
          (response)=>{
            self.auditProcess = false;
            self.$message({
              message: '提交成功',
              type: 'success'
            });
            self.tipInfo=true;
            self.loadProcessDefinitions();
          }
        );
      },

    },
    filters: {
      toChineseNumber: function (value) {
        if(value==1){
          return "一";
        }
        if(value==2){
          return "二";
        }
        if(value==3){
          return "三";
        }
        if(value==4){
          return "四";
        }
        if(value==5){
          return "五";
        }
        if(value==6){
          return "六";
        }
        if(value==7){
          return "七";
        }
        if(value==8){
          return "八";
        }
        if(value==9){
          return "九";
        }
        if(value==10){
          return "十";
        }
        return value;
      }
    },
    mounted: function () {
      this.init();
    },

  }
</script>
<style type="text/css">
  .processConfig .panel-title{
    position: relative;
  }
  .processConfig .audit{
    position: absolute;
    top:-3px;
    right:15px;
    z-index: 2;
  }
  .processConfig .el-autocomplete{
    width:100%;
  }
</style>
